@font-face {
    font-family: "MandaiValueSerif-Regular";
    src: url("MandaiValueSerif-Regular.ttf");
}

@font-face {
    font-family: "MandaiValueSerif-Bold";
    src: url("MandaiValueSerif-Bold.ttf");
}

.btn-rel {
    color: #fff;
    background-color: #097FDA;
    border-color: #097FDA;
}

.rel-font-1 {
    font-size: 1.3rem;
}

.rel-font-2 {
    font-size: 2rem;
}

.rel-font-3 {
    font-size: 2.4rem;
}

@media screen and (max-width: 320px) {
    .rel-font-2 {
        font-size: 1.5rem;
    }
}

.rel-radius-1 {
    border-radius: 1.3rem;
}

.vertical-center {
    min-height: 70%; /* Fallback for browsers do NOT support vh unit */
    min-height: 70vh; /* These two lines are counted as one :-)       */
    display: flex;
    align-items: center;
}

.mainButton {
    font-size: 1.8rem;
    color: #ffffff;
    border-radius: 3px solid #6F6F6E;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    background-color: #333232;
}

    .mainButton:hover, .mainButton:focus, .mainButton:active, .mainButton.active, .open > .dropdown-toggle.mainButton {
        color: #fff;
        background-color: #00b3db;
        border-color: #285e8e; /*set the color you want here*/
    }

.loading {
    background: rgba(0, 0, 0, 0.85);
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}

.btnSubmit {
    position: relative;
    font-size: 1.5rem;
    font-weight: bold;
    -webkit-transition-property: all;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: initial;
    border: 3px solid #C84332;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    background: #C84332;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    font-family: 'Ebrima Bold', Helvetica, Arial, sans-serif;
}

.btnBack {
    font-size: 1.5rem;
    -webkit-transition-property: all;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: initial;
    border: 3px solid #097FDA;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    background-color: #097FDA;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.queueTicket {
    background-image: url(../img/ticket1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.qInfo {
    border: 3px solid #FFFFFF;
    min-width: 10%;
    min-height: 40px;
    background: #B6B0B0;
    float: right;
    font-weight: bold;
    height: 100%;
    padding-top: 2%;
    text-align: center;
    font-size: 1em;
}

.hideQ {
    color: transparent;
    background: #E8E8E8;
}

.curQ {
    background: #6D6B6B;
    color: #FFFFFF;
    font-size: 0.58em;
    min-width: 10%;
    min-height: 40px;
    padding: 1% 0;
    font-weight: bold;
    height: 100%;
}

.rel-color-1 {
    background-color: #097FDA !important
}

a.rel-color-1:focus, a.rel-color-1:hover, button.rel-color-1:focus, button.rel-color-1:hover {
    background-color: #1e7e34 !important
}

.hnf-header__logo {
    flex-shrink: 0;
    order: 2;
    display: block;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.rel-top-right {
    position: absolute;
    top: 0px;
    right: 0px;
}

.rel-font-regular {
    font-family: MandaiValueSerif-Regular;
}

.rel-font-bold {
    font-family: MandaiValueSerif-Bold;
}

.rel-text-danger {
    color: #003400;
}